<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>作用域插槽</h1>
    <p>用于将数据暴露到插槽上去，父组件使用插槽的时候，可以使用这些数据。</p>
    <p>在声明子组件的slot标签的使用可以使用v-bind:参数名="值"，来暴露参数。</p>
    <p>在父组件中，使用v-slot:插槽名字="暴露的参数名"，来接收暴露出来的数据。</p>
    <template id="tem1">
        <!-- 把user属性暴露上去 -->
        <slot v-bind:user1="fengxian" :user2="yuanhaozhe">{{user.firstName}}</slot>
    </template>

    <main id="app">
        <current-user>
            <!-- 把暴露上来的数据使用data接收 -->
            <template v-slot:default="{user1}">
                <p>用户1：{{user1.lastName}}</p>
            </template>
        </current-user>

        <current-user>
            <!-- 如果只有一个插槽，可以省略:default  -->
            <template v-slot="{user2}">
                <p>用户2：{{user2.lastName}}</p>
            </template>
        </current-user>
    </main>
</body>
<script src="../vue.min.js"></script>
<script>
    new Vue({
        el: "#app",

        components: {
            "current-user": {
                template: "#tem1",
                data() {
                    return {
                        fengxian: {
                            firstName: "Hydra",
                            lastName: "Feng"
                        },
                        yuanhaozhe: {
                            firstName: "Haozhe",
                            lastName: "Yuan"
                        }
                    }
                },
            },

        }
    })
</script>

</html>